<nz-table
  nzShowPagination
  nzTableLayout="fixed"
  [nzSize]="tableSize"
  [nzTotal]="tableConfig!.total"
  [nzPageIndex]="tableConfig.pageIndex"
  [nzScroll]="tableConfig.needNoScroll ? {} : { x: '1100px' }"
  [nzPageSize]="tableConfig.pageSize"
  (nzQueryParams)="onQueryParamsChange($event)"
  [nzLoading]="tableConfig.loading"
  (nzPageSizeChange)="onPageSizeChange($event)"
  [nzFrontPagination]="false"
  [nzData]="_dataList"
  [nzOuterBordered]="true"
  nzShowSizeChanger
  nzShowQuickJumper
  [nzBordered]="true"
  [nzShowTotal]="rangeTemplate"
>
  <ng-template #rangeTemplate let-range="range" let-total>{{ range[0] }}-{{ range[1] }} 共 {{ total }} 条</ng-template>
  <thead>
    <tr>
      <th
        class="animate-bg-0"
        [nzLeft]="true"
        [nzIndeterminate]="indeterminate"
        *ngIf="tableConfig.showCheckbox"
        (nzCheckedChange)="onAllChecked($event)"
        [nzWidth]="'40px'"
        [nzChecked]="allChecked"
      ></th>
      <ng-container *ngFor="let head of tableConfig.headers; let headIndex = index; let last = last; let first = first">
        <th
          class="animate-bg-0"
          [nzWidth]="head.width + 'px'"
          [nzRight]="!!head.fixed && head.fixedDir === 'right'"
          [nzLeft]="!!head.fixed && head.fixedDir === 'left'"
          nz-resizable
          nzPreview
          nzBounds="parent"
          (nzResizeEnd)="onResize($event, head.title)"
          [nzMaxWidth]="1200"
          [nzMinWidth]="1"
          *ngIf="head.show === undefined || head.show === true"
        >
          <nz-resize-handle *ngIf="!last && (tableConfig.showCheckbox ? true : !last)" nzDirection="right">
            <div class="resize-trigger"></div>
          </nz-resize-handle>
          {{ head.title }}
          <div class="sort-wrap m-l-8 hand-model" (click)="changeSort(head)" *ngIf="head.showSort">
            <i class="sort-caret ascending" [class.sort-caret-sel-asc]="head.sortDir === 'asc'"></i>
            <i class="sort-caret descending" [class.sort-caret-sel-desc]="head.sortDir === 'desc'"></i>
          </div>
        </th>
      </ng-container>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let data of _dataList">
      <ng-container *ngFor="let item of mapOfExpandedData[data.id]; let rowIndex = index">
        <tr *ngIf="(item.parent && item.parent.expand) || !item.parent">
          <td
            class="animate-bg-0"
            [nzIndeterminate]="item['indeterminate']"
            nzEllipsis
            *ngIf="tableConfig.showCheckbox"
            [nzLeft]="true"
            (nzCheckedChange)="checkRowSingle($event, rowIndex, item)"
            [nzChecked]="item['_checked']"
          ></td>
          <ng-container *ngFor="let head of tableConfig.headers; let headIndex = index; let last = last; let first = first">
            <td
              *ngIf="head.show === undefined || head.show === true"
              [nzLeft]="!!head.fixed && head.fixedDir === 'left'"
              [nzRight]="!!head.fixed && head.fixedDir === 'right'"
              [nzIndentSize]="first ? item.level! * 20 : 0"
              [ngClass]="head.tdClassList ? head.tdClassList : ''"
              [nzEllipsis]="!head.notNeedEllipsis"
              [nzShowExpand]="first ? !!item.children : false"
              [(nzExpand)]="item.expand"
              (nzExpandChange)="collapse(mapOfExpandedData[data.id], item, $event)"
            >
              <ng-container *ngIf="head.tdTemplate; else rowTpl">
                <ng-container *ngTemplateOutlet="head.tdTemplate; context: item"></ng-container>
              </ng-container>
              <ng-template #rowTpl>
                <ng-container *ngIf="head.pipe; else noPipe">
                  <span [title]="item | tableFiledPipe: head.field | map: head.pipe">{{ item | tableFiledPipe: head.field | map: head.pipe }}</span>
                </ng-container>
                <ng-template #noPipe>
                  <ng-container>
                    <span [title]="item | tableFiledPipe: head.field">{{ item | tableFiledPipe: head.field }}</span>
                  </ng-container>
                </ng-template>
              </ng-template>
            </td>
          </ng-container>
        </tr>
      </ng-container>
    </ng-container>
  </tbody>
</nz-table>
